<template>
  <div class="app-container">
    <div class="query-container">
      <el-form ref="queryForm" :model="queryParams" :label-width="labelWidth" :inline="true">
        <el-form-item :label="$t('departmentCode')" prop="code">
          <el-input v-model="queryParams.code" :placeholder="$t('inputdepartmentCode')" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item :label="$t('departmentName')" prop="name">
          <el-input v-model="queryParams.name" :placeholder="$t('inputdepartmentName')" clearable size="small" @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('search') }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('reset') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tool-container">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">{{ $t('addBtn') }}</el-button>
        </el-col>
      </el-row>
    </div>
    <el-table v-loading="loading" border :highlight-current-row="true" :data="departmentsList" @sort="sortChange">
      <el-table-column :label="$t('departmentCode')" prop="code" width="100" />
      <el-table-column :label="$t('departmentName')" prop="name" width="150" />
      <el-table-column :label="$t('username')" width="420" show-overflow-tooltip>
        <template #default="{ row }">
          <!-- 循环遍历 departments 数组 -->
          <span v-for="(item, index) in row.departments" :key="index">
            {{ item.name }}
          </span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('createdUser')" prop="created" width="100" />
      <el-table-column :label="$t('createdDate')" prop="created_date" width="160" />
      <el-table-column :label="$t('createdProgram')" prop="created_program" width="200" show-overflow-tooltip />
      <el-table-column :label="$t('updatedUser')" prop="updated" width="100" />
      <el-table-column :label="$t('updatedDate')" prop="updated_date" width="160" />
      <el-table-column :label="$t('updatedProgram')" prop="updated_program" width="200" show-overflow-tooltip />
      <el-table-column :label="$t('operate')" align="center" width="220" fixed="right" class-name="fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)">{{ $t('detailBtn') }}</el-button>
          <el-button v-auth="[]" size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">{{ $t('modifyBtn') }}</el-button>
          <el-dropdown v-more size="mini" trigger="click" @command="command => handleCommand(command, scope.row)">
            <span class="el-dropdown-link">
              <i class="el-icon-d-arrow-right el-icon--right" />{{ $t('moreBtn') }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-auth="[]" command="handleDelete" icon="el-icon-delete">{{ $t('deleteBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" command="handleAssignUsers" icon="el-icon-user">{{ $t('assignUserBtn') }}</el-dropdown-item>
              <el-dropdown-item v-auth="[]" command="handleAssignSerialNums" icon="el-icon-user">{{ $t('assignSerialNumber') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.page_size"
      @pagination="getList"
    />
    <departments-sheet ref="departmentsSheet" @refreshList="getList" />
    <departments-inquire ref="departmentsInquire" />
    <departmentassignuser ref="departmentAssignUser" />
    <departmentassignserialnum ref="departmentAssignSerialNum" />
  </div>
</template>

<script>
import { deleteDepartmentsApi } from '../api/departments.api'
import listMixin from '@/mixins/ListMixin'
import { mapGetters } from 'vuex'
import DepartmentsSheet from './departments-sheet.vue';
import DepartmentsInquire from './departments-inquire.vue';
import Departmentassignuser from './departmentassignuser.vue'
import Departmentassignserialnum from './departmentassignserialnum.vue'

export default {
  name: 'DepartmentsList',
  components: {
    DepartmentsSheet,
    DepartmentsInquire,
    Departmentassignuser,
    Departmentassignserialnum
  },
  mixins: [listMixin],
  data() {
    return {
      queryParams: {
        'code': undefined,
        'name': undefined
      },
      actionFuncName: 'master/getDepartmentsList',
      actionApi: {
        'delete': deleteDepartmentsApi
      }
    }
  },
  computed: {
    ...mapGetters(['departmentsList', 'name']),
    labelWidth() {
      // 根据国际化设置确定标签宽度,如果语言环境是英语，则返回150px
      return this.$i18n.locale === 'en' ? '150px' : '80px';
    }
  },
  methods: {
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case 'handleDelete':
          this.handleDelete(row);
          break;
        case 'handleAssignUsers':
          this.handleAssignUsers(row);
          break;
        case 'handleAssignSerialNums':
          this.handleAssignSerialNums(row);
          break;
        default:
          break;
      }
    },
    /** 点击明细按钮 */
    handleDetail(row) {
      this.$refs.departmentsInquire.openSheetDialog(row);
    },
    handleAdd() {
      this.$refs.departmentsSheet.openSheetDialog()
    },
    handleUpdate(row) {
      this.$refs.departmentsSheet.openSheetDialog({ ...row })
    },
    // 分配用户
    handleAssignUsers(row) {
      this.$refs.departmentAssignUser.openSheetDialog({ ...row });
    },
    // 分配制番
    handleAssignSerialNums(row) {
      this.$refs.departmentAssignSerialNum.openSheetDialog({ ...row });
    },
    handleDelete(row) {
      const confirmMessage = this.$t('dataDeleteConfirm', { title: this.$t('departmentCode'), value: row.code })
      const successMessage = this.$t('deleteSuccess', { title: this.$t('departmentCode'), value: row.code })
      this.handleAction('delete', row.id, confirmMessage, successMessage)
    }
  }

}
</script>

<style scoped>
</style>
